<template>
  <a-modal
    v-model:visible="visible"
    title="文章发布标题"
    :okButtonProps="onButtonProps"
    @ok="submit(formRecord)"
  >
    <a-form layout="vertical" :model="formRecord">
      <a-form-item v-bind="validateInfos.title">
        <a-input v-model:value="formRecord.title" placeholder="标题">
          <template #prefix>
            <EditOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="formRecord.synopsis" placeholder="简介">
          <template #prefix>
            <ContainerOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        类型:
        <a-radio-group v-model:value="formRecord.type">
          <a-radio value="blog"> 日志 </a-radio>
          <a-radio value="book"> 读书 </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { Modal, Radio } from "ant-design-vue";
import { reactive, computed } from "vue";
import { EditOutlined, ContainerOutlined } from "@ant-design/icons-vue";
import { useState } from "@u/hook.js";
import { useSuccessNotice } from "@u/notice.js";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default {
  components: {
    AModal: Modal,
    EditOutlined,
    ContainerOutlined,
    ARadio: Radio,
    ARadioGroup: Radio.Group,
  },
  setup(props, { emit }) {
    const [visible, setVisible] = useState(false);
    const formRecord = reactive({
      title: "",
      synopsis: "",
      type: "blog",
    });
    const rules = reactive({
      title: [
        {
          required: true,
          message: "标题为必填",
        },
      ],
    });

    const onButtonProps = reactive({
      disabled: true,
      loading: false,
    });
    const { validateInfos } = useForm(formRecord, rules);

    onButtonProps.disabled = computed(() => {
      const status = validateInfos.title.validateStatus === "success";
      return !status;
    });
    const submit = (record) => emit("submit", record);

    return {
      submit,
      formRecord,
      visible,
      setVisible,
      validateInfos,
      onButtonProps,
    };
  },
};
</script>